<script setup lang="ts">
import type { getListParams, typeCalss } from '@/apis/video'
import * as videoApis from '@/apis/video'
import headerBar from '@/components/headerBar.vue'
import homeleftBar from '@/components/homeleftBar.vue'
import swiperShow from '@/components/swiperShow.vue'
import videoLib from '@/components/videoLib.vue'
import showVideoListBox from '@/components/showVideoListBox.vue'
import footBar from '@/components/footBar.vue'
import { ref, type Ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import MasonryVideoList from '@/components/MasonryVideoList.vue'

let route = useRoute()
let router = useRouter()
const typeId = ref<string>()
const typeName = ref<string>()

const classList: Ref<typeCalss[]> = ref([])
videoApis.getClass().then(e => {
  classList.value = [{ type_id: 'videoLib', type_name: '片库' }].concat(e.data.data)
  checkRouter()
})

function checkRouter() {
  if (!(classList.value.length > 0)) return
  let findit = null
  for (let v of classList.value) {
    if (v.type_id == route.params.typeid) {
      findit = v
      break
    }
  }
  if (!findit) classChange(classList.value[1])
  if (findit) classChange(findit)
}

watch(
  () => route.params.typeid,
  () => {
    if (!typeId.value) return
    typeId.value = route.params.typeid as string
    checkRouter()
  }
)

interface showValue {
  name: string
  list: []
}

const classChange = (e: typeCalss) => {
  // if (typeId.value == e.type_id) return
  window.scrollTo(0, 0)
  router.push({ path: `/home/${e.type_id}` })
  typeId.value = e.type_id
  typeName.value = e.type_name
  getVideoList()
}

let reqIndex = 0
const showValues: Ref<showValue[]> = ref([])
const isloading = ref(false)
async function getVideoList() {
  showValues.value = []
  isloading.value = true
  let reqIndex_ = Math.random() * 100
  reqIndex = reqIndex_
  switch (typeName.value) {
    case '首页': {
      for (let v of [
        { name: '国产', parms: { type_id: '97adffd3', orderType: 2 } },
        { name: '韩剧', parms: { type_id: 'afd11236', orderType: 2 } },
        { name: '综艺', parms: { type_id: '4ede5b13', orderType: 2 } },
        { name: '动漫', parms: { type_id: 'f922d024', orderType: 2 } }
        // { name: '体育赛事', parms: { type_id: '31df7d54', orderType: 2 } }
      ]) {
        let res = (await videoApis.getList(20, 0, v.parms)).data
        if (reqIndex != reqIndex_) return
        showValues.value.push({
          name: v.name,
          list: res.data.list
        })
      }
      isloading.value = false
      break
    }
    case '片库':
      break
    default: {
      let type_id = typeId.value
      let rqs = []
      let names: string[] = []
      for (let v of [
        { name: '最新发布', parms: { type_id, orderType: 2 } },
        { name: '最近加入', parms: { type_id, orderType: 0 } },
        { name: '评分排序', parms: { type_id, orderType: 1 } }
      ]) {
        names.push(v.name)
        rqs.push(videoApis.getList(20, 0, v.parms))
      }

      Promise.all(rqs).then(datas => {
        if (reqIndex != reqIndex_) return
        for (let i in datas) {
          let res = datas[i].data
          showValues.value.push({
            name: names[i],
            list: res.data.list
          })
        }
        isloading.value = false
      })

      break
    }
  }
}

const videoLibParms: Ref<getListParams> = ref({})
async function getParms(e: getListParams) {
  videoLibParms.value = e
}
</script>

<template>
  <div class="valueBox">
    <headerBar class="headerBar"></headerBar>

    <div class="homeleftBarSon">
      <homeleftBar class="homeleftBar" :classList="classList" :typeId="typeId"></homeleftBar>
    </div>
    <div class="showPage">
      <swiperShow v-show="route.params?.typeid != 'videoLib'" class="swiperShow" :typeId="typeId"></swiperShow>
      <div class="showPage-innerBox">
        <videoLib @getParms="getParms" v-show="route.params?.typeid == 'videoLib'" :classList="classList.slice(2, classList.length)"></videoLib>
        <MasonryVideoList v-if="route.params?.typeid == 'videoLib'" :video-parms="videoLibParms"></MasonryVideoList>
        <showVideoListBox v-else class="showVideoListBox" v-for="value in showValues" :key="value.name" :name="value.name" :videoList="value.list"></showVideoListBox>
        <div v-if="isloading && route.params?.typeid != 'videoLib'" v-loading="true" style="height: 700px; width: 100%" element-loading-text="正在加载影片。。。"></div>
        <footBar></footBar>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.showVideoListBox {
  padding-bottom: 30px;
}
.headerBar {
  position: fixed;
  top: 0;
  // left: 0;
  width: 100%;
  z-index: 999;
  min-width: 768px;
  max-width: 2376px;
  margin: 0 auto;
}
.valueBox {
  display: flex;
  position: relative;
  // min-width: 768px ;
}

.showPage {
  width: 100%;
  color: #eee;
  .swiperShow {
    width: 100%;
    min-width: 768px;
  }
  &-innerBox {
    min-width: calc(768px - 146px);
    margin-top: 70px;
    margin-left: 146px;
    padding: 20px;
    padding-right: 60px;
  }
}

.homeleftBarSon {
  direction: ltr;
  z-index: 1;
  position: fixed;
  // left: 0;
  top: 70px;

  .homeleftBar {
    height: calc(100% - 70px);
    overflow-y: scroll;
    direction: rtl;

    // 滚动条宽度
    &::-webkit-scrollbar {
      width: 6px;
    }
    // 滚动条轨道
    &::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0);
      border-radius: 2px;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0);
      border-radius: 10px;
    }

    &:hover {
      &::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
      }
    }
  }
}
</style>
